
<template>
    <div class="news">
        <div class="container">
            <div class="head">
                <h3>新鲜好物 <span>新鲜出炉 品质靠谱</span></h3>
                <a href="javascript:;">查看全部&gt;</a>
            </div>
            <div class="content">
                <ul>
                    <router-link  :to="'/shopdetail/'+item.id" tag="li" v-for="item,index in shopList" :key="item.id" :class="{hover:index == tabIndex}" @mouseover="tabIndex = index" @mouseout="tabIndex = -1"> 
                        <a href="javascript:;">
                            <img :src="item.picture" alt="">
                            <p>{{item.name}}</p>
                            <p>￥{{item.price}}</p>
                        </a>
                    </router-link>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            shopList: [],
            tabIndex:-1
        }
    },
    methods: {

    },
    mounted() {
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/home/new').then((res) => {
            if (res.data.msg == '操作成功') {
                this.shopList = res.data.result
            }
        })
    },
}
</script>

<style lang="scss" scoped>
.news{
    background: #fff;
}
.head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;
    background: #fff;

    h3 {
        flex: 1;
        font-size: 32px;
        font-weight: 400;
        margin-left: 6px;
        height: 35px;
        line-height: 35px;

        span {
            font-size: 16px;
            color: #999;
            margin-left: 20px;
        }
    }
}

.content {
    background: #fff;
    ul {
        display: flex;
        justify-content: space-between;
        height: 406px;

        .hover{
            transform: translate3d(0,-3px,0);
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        li {
            width: 306px;
            height: 406px;
            background: #f0f9f4;
            transition: all .5s;

            a {
                color: #333;

                img {
                    width: 306px;
                    height: 306px;
                }

                p {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    font-size: 22px;
                    padding: 12px 30px 0 30px;
                    text-align: center;

                    &:nth-of-type(2) {
                        color: #cf4444;
                    }
                }
            }
        }
    }
}
</style>